<script setup>

import {onMounted, ref} from 'vue'
import axios from "@/axios";
import {ElMessage} from "element-plus";

const batch = ref('')
const percentage = ref(0)
const chunkSize = 1024 * 1024 * 5

let file
let idx = 0
let toltal = 0
function handleChange(e) {
  if(batch.value===''){
    ElMessage({
      showClose: true,
      message: '请输入批次',
      type: 'error',
    })
    return
  }
  idx=0
  file = e.target.files[0];
  toltal = Math.ceil(file.size / chunkSize)
  upload()
}

function upload() {
  if (idx < toltal) {
    console.log(idx + 1)
    const start = idx * chunkSize;
    const end = Math.min(start + chunkSize, file.size);
    const chunk = file.slice(start, end);
    const formData = new FormData();
    formData.append('file', chunk);
    formData.append('path', '/hddisk/data/anh/upload/'+type.value+'/');
    formData.append('batch', batch.value);
    formData.append('count', toltal)
    formData.append('part', idx + 1)
    formData.append('fileType', type.value)
    formData.append('fileName', file.name)
    axios.post('/anh/file/slice2', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    }).then(() => {
      idx++;
      upload()
      percentage.value = idx * 100 / toltal
    }).catch(e => {
      console.log(e)
    });
  }
}

const tableData = ref()
onMounted(() => {

})


const types=["小区底表","板卡高温","波动率","网管用户数","弱光用户数","pppoe用户数","fttr用户数","超限率","劣化率","小区标识","重复告警","多次告警","radius掉线统计","用户中断平均时长"]
const type=ref('')
function change(){
  axios.get('/anh/file/getFileList?fileType='+type.value+'&size=10&page=1').then(res => {
    tableData.value = res.data.data.records
  })
}

function deleteFile(row){
  console.log(row)
  axios.post('/anh/file/delete?id='+row.id)
  change()
}
</script>

<template>
  <el-select
      @change="change"
      v-model="type"
      placeholder="选择类型"
      size="large"
      style="width: 240px"
  >
    <el-option
        v-for="item in types"
        :key="item"
        :label="item"
        :value="item"
    />
  </el-select>
  <el-input v-model="batch" style="width: 240px" placeholder="输入批次"/>
  <el-upload
      class="upload-demo"
      :onchange="handleChange"
      :auto-upload="false"
      :show-file-list="false"
  >
    <el-button>上传文件</el-button>
  </el-upload>
  <el-progress :percentage="percentage" color="#409eff"/>
  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column prop="fileName" label="文件名" width="180"/>
    <el-table-column prop="batch" label="批次" width="180"/>
    <el-table-column prop="time" label="上传时间"/>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="danger" @click="deleteFile(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped>

</style>